<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
vue指令
带有v-前缀的特殊标签属性,不同属性对应不同的功能

语法
v-if = 表达式
v-else-if = 表达式
v-else 后不需要跟表达式

else 不能单独使用
-->

<body>
    <div id="app">
        <p v-if="gender === 1">男</p>
        <p v-else>女</p>
        <hr>
        <p v-if="score >= 90">成绩评定A</p>
        <p v-else-if="score >= 70">成绩评定B</p>
        <p v-else-if="score >= 60">成绩评定C</p>
        <p v-else-if="score >= 50 ">成绩评定D</p>
        <p v-else>成绩评定E</p>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                gender: 1,
                score: 95
            }
        })
    </script>

</body>

</html>